<template>
  <div class="w-10">
    <div class="w-10 sowing-ct" @click="navToHello">
      <sowing-map :picList="aPoiPic" :ukey="'urlPath'" @showImgPic="showImgPic"></sowing-map>
    </div>

    <div class="w-10 pd-3 flex fx-wrap jc-sb des-ct">
      <div class="bk-c-w flex mg-b-3 b-s des-item" @click="navToMyCenter">
        <img src="/static/images/home-icon-h.png" class="des-img">
        <div>
          <div class="f-48">我要缴社保</div>
          <div class="f-36 c-9e">低价安全高效</div>
        </div>
      </div>
      <div class="bk-c-w flex mg-b-3 b-s des-item" @click="navToMyCenter">
        <img src="/static/images/my-icon-h.png" class="des-img">
        <div>
          <div class="f-48">我要减员</div>
          <div class="f-36 c-9e">减员即不再缴社保</div>
        </div>
      </div>
    </div>

    <div class="w-10 pd-3 flex fx-wrap jc-sb question-ct">
      <div class="bk-c-w flex mg-b-3 b-s jc-sb question-item">
        <div>
          <div class="f-48">买前必读</div>
          <div class="f-36 c-9e">购买前先阅读此声明</div>
        </div>
        <img src="/static/images/home-sel.png" class="question-img">
      </div>
      <div class="bk-c-w flex mg-b-3 b-s jc-sb question-item">
        <div>
          <div class="f-48">参保地介绍</div>
          <div class="f-36 c-9e">参保地和时间节点</div>
        </div>
        <img src="/static/images/home-sel.png" class="question-img">
      </div>
      <div class="bk-c-w flex b-s jc-sb question-item">
        <div>
          <div class="f-48">常见问题</div>
          <div class="f-36 c-9e">常见热门问题汇总</div>
        </div>
        <img src="/static/images/home-sel.png" class="question-img">
      </div>
      <div class="bk-c-w flex b-s jc-sb question-item">
        <div>
          <div class="f-48">如何参保</div>
          <div class="f-36 c-9e">手把手教您如何参保</div>
        </div>
        <img src="/static/images/home-sel.png" class="question-img">
      </div>
    </div>

    <div class="pd-3 flex-c f-48  service-title">
      <img src="/static/images/my-icon-h.png" class="service-img">服务升级项目
    </div>

    <div class="bk-c-w w-10 pd-3 mg-b-3 service-ct">
      <div class="f-39 mg-b-3 c-a5 item-title">基础服务</div>
      <div class="f-39 flex jc-sb mg-b-3 foundation-ct">
        <div class="flex-c foundation-item">个人信息填报</div>
        <div class="flex-c foundation-item">缴纳社保-增员</div>
        <div class="flex-c foundation-item">停止缴纳-减员</div>
      </div>
      <div class="f-39 mg-b-3 c-a5 item-title">个性化服务</div>
      <div class="f-39 flex jc-sb fx-wrap foundation-ct">
        <div class="flex-c mg-b-3 foundation-item single-item">定点医院变更</div>
        <div class="flex-c mg-b-3 foundation-item single-item">银行卡信息变更</div>
        <div class="flex-c mg-b-3 foundation-item single-item">个人手机号变更</div>
        <div class="flex-c mg-b-3 fx-col foundation-item single-item">
          <div>二次采集制卡</div>
          <div class="f-33 line-thr origin-price">原价345</div>
        </div>
        <div class="flex-c mg-b-3 fx-col foundation-item single-item">
          <div>社保转移</div>
          <div class="f-33 line-thr origin-price">原价345</div>
        </div>
        <div class="flex-c mg-b-3 fx-col foundation-item single-item">
          <div>社保接续</div>
          <div class="f-33 line-thr origin-price">原价345</div>
        </div>
        <div class="flex-c fx-col foundation-item single-item">
          <div>修改信息</div>
          <div class="f-33 line-thr origin-price">原价345</div>
        </div>
        <div class="flex-c foundation-item single-item">社保卡申领</div>
        <div class="flex-c foundation-item single-item">社保政策咨询</div>
      </div>
    </div>

    <div class="pd-3 flex-c f-48 service-title">
      <img src="/static/images/my-icon-h.png" class="service-img">社保用途
    </div>
    <div class="w-10 pd-3">
      <div class="w-10 flex f-39 c-a5 jc-sb used-ct">
        <div class="flex-c fx-col bk-c-w used-item">
          <img src="/static/images/my-icon-h.png" class="used-img">
          <span>买房</span>
        </div>
        <div class="flex-c fx-col bk-c-w used-item">
          <img src="/static/images/my-icon-h.png" class="used-img">
          <span>买车</span>
        </div>
        <div class="flex-c fx-col bk-c-w used-item">
          <img src="/static/images/my-icon-h.png" class="used-img">
          <span>上学</span>
        </div>
        <div class="flex-c fx-col bk-c-w used-item">
          <img src="/static/images/my-icon-h.png" class="used-img">
          <span>落户</span>
        </div>
      </div>
    </div>
    <div class="w-10 t-a-c f-39 service-phone">
       服务热线 ：4000-234-232
    </div>
    <commonFooter></commonFooter>
  </div>
</template>

<script>
import variables from '@/style/variables'
import sowingMap from '@/components/common/sowingMap'
import commonFooter from '@/components/common/commonFooter'
import { mixinParams } from '@/vmixin/vmixin'
export default {
  data () {
    return {
      aPoiPic: [
        {
          urlPath:
            'http://image.happyshare.com/wxa/%E5%88%86%E4%BA%AB%E5%9B%BE%E7%89%87.jpg'
        },
        { urlPath: 'http://image.happyshare.com/wxa/%E6%8A%A2%E8%B4%AD.jpg' },
        { urlPath: 'http://image.happyshare.com/wxa/%E5%8A%A9%E5%8A%9B.jpg' }
      ]
    }
  },
  created () {
  },
  mounted () {},
  filters: {
    // moneyFilter(){
    //     return "33"
    // }
  },
  mixins: [mixinParams],
  components: {
    sowingMap,
    commonFooter
  },

  computed: {
    // 将获取的数据按照A-Z字母开头排序
    sortgroupcity () {
      let sortobj = {}
      return sortobj
    },
    variables () {
      return variables
    }
  },
  methods: {
    navToHello () {
      this.navTo('/hello')
    },
    navToMyCenter () {
      this.navTo('/mycenter')
    },
    // 点击图标刷新页面
    showImgPic () {}
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.sowing-ct {
  height: cmSize(535);
  overflow: hidden;
}
.des-ct {
  align-items: flex-start;
  .des-item {
    flex: 0 0 49%;
    border-radius: cmSize(10);
    padding: cmSize(60) cmSize(40);
  }
  .des-img {
    margin-right: cmSize(40);
    width: cmSize(120);
    height: cmSize(120);
  }
}
.question-ct {
  .question-item {
    flex: 0 0 49%;
    border-radius: cmSize(10);
    padding: cmSize(60) cmSize(40);
  }
  .question-img {
    width: cmSize(160);
    height: cmSize(160);
  }
}
.service-title {
  color: #44b0e6;
  justify-content: flex-start;
  padding: cmSize(30);
  .service-img {
    width: cmSize(50);
    height: cmSize(50);
    vertical-align: middle;
    margin-right: cmSize(10);
  }
}
.service-ct {
  .item-title {
    border-left: cmSize(4) solid #5ea6cc;
    padding-left: cmSize(30);
    margin: cmSize(30) 0;
  }
  .foundation-item {
    background: #fff7e2;
    border-radius: cmSize(8);
    height: cmSize(140);
    width: cmSize(380);
  }
  .origin-price {
    color: #4fb1ea;
  }
  .single-item {
    background: #e3f3ff;
  }
}

.used-item {
  width: cmSize(280);
  height: cmSize(280);
  .used-img {
    width: cmSize(80);
    height: cmSize(80);
    margin-bottom: cmSize(30);
  }
}
.service-phone{
 padding: cmSize(40) cmSize(40) cmSize(260);
}
</style>
